<template>
  <div>
    <!-- 面包屑导航 -->
    <breadcrumb></breadcrumb>
    <div class="control">
      <!-- 车牌号 -->
      <div class="inputItem">
        <div class="title">车牌号</div>
        <div class="inputBox">
          <el-input v-model="carNumber" @keyup.enter.native="searchList(1)">
          </el-input>
        </div>
      </div>
      <!-- 车型 -->
      <div class="inputItem">
        <div class="title">车型</div>
        <div class="inputBox">
          <el-select
            class="select"
            v-model="TypeSelected"
            placeholder="请选择"
            @change="changeVehicleType($event)"
          >
            <el-option
              v-for="item in vehicleTypeData"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictLabel"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 查询 -->
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="searchList(1)"
        >查询</el-button
      >
      <el-button
        type="plain"
        size="small"
        icon="el-icon-refresh-right"
        @click="CleanUp"
        >清空</el-button
      >
    </div>
    <div class="main">
      <div class="addBtn">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="add"
          >新增</el-button
        >
      </div>
      <div class="list">
        <el-table :data="records" style="width: 100%">
          <el-table-column align="center" prop="SerialNumber" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 + Number(pageSize) * (pageCurrent - 1) }}
            </template>
          </el-table-column>
          <el-table-column prop="carFortyFive" label="车辆照片">
            <template slot-scope="scope">
              <div style="display: flex; justify-content: center">
                <el-image
                  style="width: 65px; height: 48px"
                  :src="scope.row.carFortyFive"
                  :preview-src-list="[scope.row.carFortyFive]"
                >
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="numberplate" label="车牌号">
          </el-table-column>
          <el-table-column align="center" prop="vehicleType" label="车辆类型">
          </el-table-column>
          <el-table-column align="center" prop="brandModel" label="品牌型号">
          </el-table-column>

          <el-table-column align="center" label="所属车队">
            <template slot-scope="scope">
              {{ scope.row.fleetName == null ? "无" : scope.row.fleetName }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="所属司机">
            <template slot-scope="scope">
              <div v-if="scope.row.driverName">{{ scope.row.driverName }}</div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="certStatus" label="认证状态">
            <template slot-scope="scope">
              <div class="stateBtns">
                <el-button
                  :class="
                    scope.row.certStatus && scope.row.certStatus.value == 2
                      ? 'Pass'
                      : 'noPass'
                  "
                  size="small"
                >
                  <i class="iconfont icon-dian"></i>
                  {{
                    scope.row.certStatus && scope.row.certStatus.value == 0
                      ? "未审核"
                      : scope.row.certStatus && scope.row.certStatus.value == 2
                      ? "审核通过"
                      : scope.row.certStatus && scope.row.certStatus.value == 3
                      ? "审核不通过"
                      : "审核中"
                  }}
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="加入时间"
          ></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button
                  type="text"
                  size="small"
                  @click="showDetailBox(scope.row.vehicleId)"
                  >详情</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="editor(scope.row.vehicleId)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="delit(scope.row.vehicleId)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination
          @current-change="changePages($event)"
          class="pagination"
          background
          layout="slot,prev, pager, next"
          :total="data.total * 1"
          :page-size="data.size * 1"
          :pager-count="5"
        >
          <template slot>
            <span
              style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              "
              >共{{ data.total }}条,每页{{ data.size }}条</span
            >
          </template>
        </el-pagination>
      </div>
    </div>
    <!-- 详情 -->
    <div>
      <el-dialog
        custom-class="zdy_dialog"
        width="30%"
        :visible.sync="VisibleDetail"
      >
        <div class="dialog_header" slot="title">
          <i class="iconfontcolor icon-dairenzhengcheliang"></i>
          <div class="infoBox">
            <div class="info">
              <span class="carNumber">{{ DetailsData.numberplate }}</span>
              <div class="tag">已认证</div>
            </div>
            <div class="text">车辆编号：{{ DetailsData.vehicleId }}</div>
          </div>
        </div>

        <div class="dialog_body">
          <!-- 车辆信息 -->
          <div class="title">
            <i class="iconfontcolor icon-xinxi"></i>
            <h3>车辆信息</h3>
            <div class="center_line"></div>
          </div>
          <el-descriptions
            :colon="true"
            :column="1"
            :contentStyle="{ fontSize: '12px', color: '#262626' }"
            :labelStyle="{ fontSize: '12px', color: '#939393' }"
          >
            <el-descriptions-item label="车辆类型">{{
              DetailsData.vehicleType
            }}</el-descriptions-item>
            <el-descriptions-item label="品牌型号">{{
              DetailsData.brandModel
            }}</el-descriptions-item>
            <el-descriptions-item label="规格">{{
              DetailsData.specification
            }}</el-descriptions-item>
            <el-descriptions-item label="参数">
              <div style="display: flex; flex-direction: column">
                <div>
                  厢长：{{
                    DetailsData.carriageLength
                      ? DetailsData.carriageLength + "米"
                      : "--.--"
                  }}，载方：{{
                    DetailsData.loadSide
                      ? DetailsData.loadSide + "方"
                      : "--.--"
                  }}，载重：{{
                    DetailsData.loadCapacity
                      ? DetailsData.loadCapacity + "吨"
                      : "--.--"
                  }}，车高：{{
                    DetailsData.vehicleHeight
                      ? DetailsData.vehicleHeight + "米"
                      : "--.--"
                  }}
                </div>
                <div>#4.2（包含）米长以上需提供道路运输许可证</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="图片资料">
              <div class="picBox">
                <div class="pic_item">
                  <img class="pic" :src="DetailsData.carFortyFive" alt="" />
                  <span>车辆照片</span>
                </div>
                <div class="pic_item">
                  <img class="pic" :src="DetailsData.drivingLicence" alt="" />
                  <span>行驶证照片</span>
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
          <!-- 关联信息 -->
          <div class="title">
            <i class="iconfontcolor icon-xinxi"></i>
            <h3>关联信息</h3>
            <div class="center_line"></div>
          </div>
          <el-descriptions
            :colon="true"
            :column="1"
            :contentStyle="{ fontSize: '12px', color: '#262626' }"
            :labelStyle="{ fontSize: '12px', color: '#939393' }"
          >
            <el-descriptions-item label="绑定司机">{{
              DetailsData.driverName
            }}</el-descriptions-item>
            <el-descriptions-item label="加入车队">{{
              DetailsData.fleetName
            }}</el-descriptions-item>
          </el-descriptions>
          <!--认证信息  -->
          <div class="title">
            <i class="iconfontcolor icon-xinxi"></i>
            <h3>认证信息</h3>
            <div class="center_line"></div>
          </div>
          <el-descriptions
            :colon="true"
            :column="1"
            :contentStyle="{ fontSize: '12px', color: '#262626' }"
            :labelStyle="{ fontSize: '12px', color: '#939393' }"
          >
            <el-descriptions-item label="认证时间">{{
              AuditTime
            }}</el-descriptions-item>
            <el-descriptions-item label="认证人">{{
              authenticator
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        class="dialog"
        :title="isadd ? '新增' : '修改'"
        :visible.sync="visibleAddBox"
        width="641px"
      >
        <el-form
          class="vehicleList"
          ref="addForm"
          :model="addForm"
          :rules="addRules"
          label-width="82px"
        >
          <el-row>
            <el-col :span="24">
              <div
                class="formTitle"
                style="display: flex; padding: 0 15px 20px; font-size: 12px"
              >
                <div><b>基本信息</b></div>
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车牌号" prop="numberplate">
                <el-input
                  v-model="addForm.numberplate"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="品牌型号" prop="brandModel">
                <el-input
                  v-model="addForm.brandModel"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆类别" prop="vehicleType">
                <div style="width: 200px">
                  <el-select
                    class="select"
                    v-model="addForm.vehicleType"
                    placeholder="请选择"
                    @change="changeVehicleType2($event)"
                  >
                    <el-option
                      v-for="item in vehicleTypeData"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictLabel"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车厢结构" prop="structureType">
                <!-- <el-input
                  v-model="addForm.licensePlateNumber"
                  style="width: 200px"
                ></el-input> -->
                <el-select
                  v-model="addForm.structureType"
                  style="width: 200px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in modePull.structureType"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="车辆规格" prop="modelType">
                <!-- <el-input
                  v-model="addForm.licensePlateNumber"
                  style="width: 200px"
                ></el-input> -->
                <el-select
                  v-model="addForm.modelType"
                  style="width: 500px"
                  multiple
                  placeholder="可多选"
                >
                  <el-option
                    v-for="(item, index) in modePull.modelType"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="vehicleId">
              <el-form-item label="绑定司机" prop="vehicleOwner">
                <el-input
                  v-model="driverName"
                  size="small"
                  :readOnly="true"
                  placeholder="请选择绑定司机"
                  clearable
                  @clear="clear"
                >
                  <template slot="append">
                    <div style="cursor: pointer" @click="SelectAccept">
                      选择绑定司机
                    </div>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="能源类型" prop="energyType">
                <template>
                  <el-radio v-model="addForm.energyType" label="燃油"
                    >燃油</el-radio
                  >
                  <el-radio v-model="addForm.energyType" label="新能源"
                    >新能源</el-radio
                  >
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆所有人" prop="vehicleOwner">
                <el-input
                  v-model="addForm.vehicleOwner"
                  style="width: 200px"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12" class="special2">
              <el-form-item label="车辆照片" prop="carFortyFive">
                <el-upload
                  class="avatar-uploader"
                  :action="url"
                  :show-file-list="false"
                  :headers="headers"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="addForm.carFortyFive"
                    :src="addForm.carFortyFive"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="12" class="special">
              <el-form-item
                label="行驶证照片（车辆页）"
                prop="drivingLicenseCar"
              >
                <el-upload
                  class="avatar-uploader"
                  :action="url + '?ocrType=4'"
                  :show-file-list="false"
                  :headers="headers"
                  :on-success="handleAvatarSuccess2"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="addForm.drivingLicenseCar"
                    :src="addForm.drivingLicenseCar"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="special">
              <el-form-item label="行驶证照片（正面）" prop="drivingLicence">
                <el-upload
                  class="avatar-uploader"
                  :action="url + '?ocrType=4'"
                  :show-file-list="false"
                  :headers="headers"
                  :on-success="handleAvatarSuccess3"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="addForm.drivingLicence"
                    :src="addForm.drivingLicence"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="special">
              <el-form-item label="道路许可证" prop="drivingRoadTransport">
                <el-upload
                  class="avatar-uploader"
                  :action="url"
                  :show-file-list="false"
                  :headers="headers"
                  :on-success="handleAvatarSuccess4"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="addForm.roadTransport"
                    :src="addForm.roadTransport"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <div
                class="formTitle"
                style="display: flex; padding: 20px 15px; font-size: 12px"
              >
                <div><b>参数</b></div>
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="厢长" prop="carriageLength">
                <el-input v-model="addForm.carriageLength" style="width: 200px">
                  <div
                    slot="suffix"
                    style="padding-right: 10px; padding-left: 10px"
                  >
                    米
                  </div>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="载重" prop="loadCapacity">
                <el-input v-model="addForm.loadCapacity" style="width: 200px">
                  <div
                    slot="suffix"
                    style="padding-right: 10px; padding-left: 10px"
                  >
                    吨
                  </div>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="载方" prop="loadSide">
                <el-input v-model="addForm.loadSide" style="width: 200px">
                  <div
                    slot="suffix"
                    style="padding-right: 10px; padding-left: 10px"
                  >
                    方
                  </div>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车高" prop="vehicleHeight">
                <el-input v-model="addForm.vehicleHeight" style="width: 200px">
                  <div
                    slot="suffix"
                    style="padding-right: 10px; padding-left: 10px"
                  >
                    米
                  </div>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="display: flex; justify-content: flex-end">
              <el-button
                class="submitBtn"
                type="primary"
                @click="submit('addForm')"
                >确 定</el-button
              >
              <el-button class="cancelBtn" @click="visibleAddBox = false"
                >取 消</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>

    <el-dialog
      title="车队信息"
      :visible.sync="DialogFleet"
      center
      class="fpkp-dialog"
    >
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input
            v-model="fleetNameValue"
            placeholder="请输入车队名称"
            clearable
          >
          </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('车队信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="DialogAcceptmood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table
        v-else
        class="xzc"
        style="width: 100%; overflow-y: scroll; height: 500px"
        :data="DialogAcceptmood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }"
        highlight-current-row
        row-class-name="row-class"
      >
        <el-table-column
          prop="fleetName"
          label="承运方名称"
          align="center"
        ></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button
                type="primary"
                style="margin-bottom: 10px"
                @click="AcceptListFleet(scope.row)"
                >选择</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
        <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
        </el-pagination>
      </div> -->
    </el-dialog>
    <el-dialog
      title="司机信息"
      :visible.sync="DialogAcceptList"
      center
      class="fpkp-dialog"
    >
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input
            v-model="driverNameValue"
            placeholder="请输入司机名称"
            clearable
          >
          </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('司机信息')">查询</el-button>
        </el-col>
      </el-row>
      <el-table
        class="xzc"
        style="width: 100%; overflow-y: scroll; height: 500px"
        :data="Acceptmood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }"
        highlight-current-row
        row-class-name="row-class"
      >
        <el-table-column
          prop="driverName"
          label="司机名称"
          align="center"
        ></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button
                type="primary"
                style="margin-bottom: 10px"
                @click="AcceptListXuan(scope.row)"
                >选择</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";

import httpApi from "@/http";
import BaseUrl from "@/http/BaseUrl";

export default {
  data() {
    let numberplateRule = (rule, value, callback) => {
      //console.log(value);
      let xny =
        /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([A-HJ-K][A-HJ-NP-Z0-9][0-9]{4}$))/;
      let ryc =
        /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
      //console.log(this.addForm.energyType);
      if (this.addForm.energyType == "新能源") {
        if (xny.test(value)) {
          //console.log(1);
          callback();
        } else {
          //console.log(2);
          callback(new Error("车牌号(新能源)格式不正确"));
        }
      }

      if (this.addForm.energyType == "燃油") {
        if (ryc.test(value)) {
          callback();
        } else {
          callback(new Error("车牌号(燃油)格式不正确"));
        }
      }
    };
    return {
      isadd: false, //是否是新增
      carNumber: "", //当前搜索的车牌号值
      TypeSelected: "", //当前选择 车型
      stateSelected: "",
      records: [], //列表数据
      data: {
        total: "",
        size: "",
        pages: "",
      },
      DialogFleet: false, // 车队弹框
      fleetNameValue: "", // 车队搜索
      DialogAcceptmood: [], //车队数据

      DialogAcceptList: false,
      driverNameValue: "",
      Acceptmood: [],
      driverName: "",
      driverId: "",
      vehicleId: "",
      fleetId: "",
      url: BaseUrl.UPLOADURL + "/file/upload",
      // 规格信息
      modePull: {
        isHighRoof: true,
        modelType: {},
        structureType: {},
      },
      // 添加车辆表单
      addForm: {
        numberplate: "", //车牌号
        vehicleType: "", //车辆类别
        brandModel: "", //品牌型号
        carFortyFive: "", // 车辆照片
        drivingLicence: "", //行驶证正面
        drivingLicenseCar: "", //行驶证
        roadTransport: "", // 道路许可证
        vehicleOwner: "", //车辆所有人
        carriageLength: "", // 厢长
        loadCapacity: "", // 载重
        loadSide: "", //载方
        vehicleHeight: "", //车高
        energyType: "燃油", // 能源类型
        modelType: "", //车厢结构
        structureType: "", // 车厢规格
      },
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      addRules: {
        numberplate: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
          {
            required: true,
            message: "车牌号格式不正确",
            validator: numberplateRule,
            trigger: "blur",
          },
        ],
        vehicleType: {
          required: true,
          message: "不能为空",
          trigger: "blur",
        },
        brandModel: {
          required: true,
          message: "不能为空",
          trigger: "blur",
        },
        carFortyFive: {
          required: true,
          message: "不能为空",
          trigger: "blur",
        },
        drivingLicence: {
          required: true,
          message: "不能为空",
          trigger: "blur",
        },
      },
      VisibleDetail: false, //详情弹窗是否显示
      vehicleTypeData: [], //车型 数组
      DetailsData: {}, //详情数据
      AuditTime: "", //认证时间
      authenticator: "", //认证人
      pageCurrent: 1, //当前页
      pageSize: "10", //每页10条
      visibleAddBox: false, //增加修改弹出框
    };
  },
  watch: {
    visibleAddBox(e) {
      if (!e) {
        this.vehicleId = "";
      }
    },
  },
  methods: {
    delit(e) {
      this.$http.carrierWaybillApi.deleteVehicle(e).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.getList();
        }
      });
    },
    async clear() {
      this.driverId = "";
      let parmas = {
        driverId: this.driverId,
        vehicleId: this.vehicleId,
      };
      let res = await this.$http.carrierWaybillApi.driverBindCar(parmas);
      if (res.data.code == "200") {
        this.$message.success("绑定成功");
      }
    },
    qyxz(val) {
      if (val == "车队信息") {
        this.SelectAccept();
      } else {
        this.AcceptListFleet(this.fleetId);
      }
    },
    //*司机信息
    async SelectAccept() {
      let parmas = {
        fleetName: this.fleetNameValue,
      };
      // 选择车队
      let res = await this.$http.orderApi.dropDownFleet(parmas);
      ////console.log(res);
      this.DialogAcceptmood = res.data.data.records;
      this.DialogFleet = true;
      // this.Acceptmood = res.data;
    },

    //选择接单人
    async AcceptListFleet(e) {
      this.fleetNameValue = "";
      this.fleetId = e.fleetId;
      this.DialogFleet = false;
      let parmas = {
        fleetId: e.fleetId,
        driverName: this.driverNameValue,
      };

      let res = await this.$http.orderApi.dropDownDriver(parmas);
      //console.log(res);
      this.Acceptmood = res.data.data;
      this.DialogAcceptList = true;
      ////console.log(res.data);
    },
    async AcceptListXuan(e) {
      this.driverId = e.driverId;
      let parmas = {
        driverId: this.driverId,
        vehicleId: this.vehicleId,
      };
      let res = await this.$http.carrierWaybillApi.driverBindCar(parmas);
      if (res.data.code == "200") {
        this.driverName = e.driverName;
        this.$message.success("绑定成功");
      } else {
        // this.$message.error()''
      }
      this.DialogAcceptList = false;
    },

    // getSerialNumber() {
    //   // 前端解决序号
    //   this.records.forEach((item, i) => {
    //     let num = i + 1 + Number(this.pageSize) * (this.pageCurrent - 1);
    //     item.SerialNumber = num;
    //   });
    // },
    getList() {
      let params = {
        portAddress: "SUPPLIER",
        certStatus: "0",
        current: this.pageCurrent,
        size: this.pageSize,
      };
      ////console.log(params);
      httpApi.vehicleApi.queryList(params).then((res) => {
        ////console.log("list", res.data.data);
        this.records = res.data.data.records;
        // this.getSerialNumber();
        this.data = res.data.data;

        // this.records.forEach((item, i) => {
        //   this.records[i].vehicleHeight = item.vehicleHeight + "米";
        //   this.records[i].carriageLength = item.carriageLength + "米";
        //   this.records[i].loadSide = item.loadSide + "方";
        //   this.records[i].loadCapacity = item.loadCapacity + "吨";
        // });
      });
    },
    getvehicleType() {
      httpApi.vehicleApi.getAllVehicleType().then((res) => {
        ////console.log("车型种类", res.data.data);
        this.vehicleTypeData = res.data.data;
      });
    },

    showDetailBox(vehicleId) {
      this.VisibleDetail = true;
      httpApi.vehicleApi
        .getVehicleDetails({
          vehicleId: vehicleId,
        })
        .then((res) => {
          this.DetailsData = res.data.data;
          ////console.log("详情数据", this.DetailsData);
          this.AuditTime =
            this.DetailsData.auditVoList[0].auditVoList[0].auditTime;
          this.authenticator =
            this.DetailsData.auditVoList[0].auditVoList[0].auditUser;
        });
    },
    changeVehicleType(value) {
      this.TypeSelected = value;
    },
    changeVehicleType2(value) {
      let cxId = null;
      this.addForm.TypeSelected = value;
      this.addForm.structureType = "";
      this.addForm.modelType = "";

      this.vehicleTypeData.map((item) => {
        if (item.dictLabel == value) {
          cxId = item.dictValue;
        }
      });
      httpApi.vehicleApi
        .getModePull({
          cxId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.modePull = res.data.data;
          }
        });
    },
    searchList(initCurrent) {
      let params = {
        portAddress: "SUPPLIER",
        auditStatus: "1",
        numberplate: this.carNumber,
        vehicleType: this.TypeSelected,
        current: initCurrent || this.pageCurrent,
        size: this.pageSize,
      };
      ////console.log("参数", params);
      httpApi.vehicleApi.queryList(params).then((res) => {
        ////console.log("查询结果", res);
        this.records = res.data.data.records;
        this.data = res.data.data;
        this.getSerialNumber();
      });
    },
    // 清空
    CleanUp() {
      this.carNumber = "";
      this.stateSelected = "";
      this.TypeSelected = "";
      this.getList(1);
    },
    changePages(val) {
      this.pageCurrent = val;
      ////console.log(val);
      this.searchList();
    },
    add() {
      this.isadd = true;
      this.addForm = {
        numberplate: "", //车牌号
        vehicleType: "", //车辆类别
        brandModel: "", //品牌型号
        carFortyFive: "", // 车辆照片
        drivingLicence: "", //行驶证url
        drivingLicenseCar: "", //行驶证正面
        roadTransport: "", // 道路许可证
        vehicleOwner: "", //车辆所有人
        carriageLength: "", // 厢长
        loadCapacity: "", // 载重
        loadSide: "", //载方
        vehicleHeight: "", //车高
        energyType: "燃油", // 能源类型
        modelType: "", //车厢结构
        structureType: "", // 车厢规格
      };
      this.visibleAddBox = true;
    },
    //编辑车辆信息
    editor(vehicleId) {
      this.isadd = false;
      this.visibleAddBox = true;
      this.vehicleId = vehicleId;

      httpApi.vehicleApi
        .getWaitAuditDetails({
          vehicleId: vehicleId,
        })
        .then((res) => {
          for (let k in res.data.data) {
            this.addForm[k] = res.data.data[k];
          }
          this.changeVehicleType2(this.addForm.vehicleType);
          let specification = JSON.parse(this.addForm.specification);
          ////console.log(specification);
          this.addForm.energyType = specification.energyType;
          ////console.log(this.addForm.energyType);
          this.addForm.structureType = specification.structureType;
          this.addForm.modelType = specification.modelType.split(",");
          if (res.data.data.driverName) {
            this.driverName = res.data.data.driverName;
          } else {
            this.driverName = "";
          }
        });
    },
    // 文件上传成功后
    handleAvatarSuccess(res, file) {
      this.addForm.carFortyFive = res.data.url;
    },
    // 文件上传成功后
    handleAvatarSuccess2(res, file) {
      var date = res.data.jsonObject;
      if (date != null) {
        this.addForm.numberplate = date.licensePlateNumber;
        //console.log(date, 111111111);
        if (date.energySign != undefined) {
          if (date.energySign.indexOf("油") != -1) {
            this.addForm.energyType = "燃油";
          } else {
            this.addForm.energyType = "新能源";
          }
        }
      }
      this.addForm.drivingLicenseCar = res.data.url;
    },
    // 文件上传成功后
    handleAvatarSuccess3(res, file) {
      this.addForm.drivingLicence = res.data.url;
      var date = res.data.jsonObject;
      if (date != null) {
        this.addForm.brandModel = date.model;
        this.addForm.vehicleOwner = date.owner;
      }
    },
    // 文件上传成功后
    handleAvatarSuccess4(res, file) {
      this.addForm.roadTransport = res.data.url;
    },
    // 文件上传之前判断文件格式及大小
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPng = file.type === "image/png";
      const isJpeg = file.type === "image/jpeg";

      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPG && !isPng && !isJpeg) {
        this.$message.error("上传图片只能是 jpg/png/jpeg 格式!");
        return false;
      }
      if (!isLt5M) {
        this.$message.error("上传图片不能超过 5MB!");
        return false;
      }
      // //console.log("条件", (isJPG || isPng || isJpeg) && isLt2M);
      return (isJPG || isPng || isJpeg) && isLt5M;
    },
    // 点击提交
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            numberplate: this.addForm.numberplate,
            vehicleId: this.isadd ? "" : this.addForm.vehicleId,
          };

          httpApi.vehicleApi.checkNumberplate(params).then((res1) => {
            if (res1.data.code == 200) {
              ////console.log(this.addForm);
              let specification = {
                energyType: this.addForm.energyType,
                structureType: this.addForm.structureType,
                modelType:
                  this.addForm.modelType == ""
                    ? this.addForm.modelType
                    : this.addForm.modelType.join(","),
              };
              this.addForm.specification = JSON.stringify(specification);
              if (this.isadd) {
                httpApi.vehicleApi.addVehicle(this.addForm).then((res) => {
                  if (res.data.code == 200) {
                    this.$message({
                      type: "success",
                      message: "添加成功!",
                    });
                    this.getList();
                    this.visibleAddBox = false;
                  } else {
                    this.$message.error("添加失败!");
                  }
                });
              } else {
                httpApi.vehicleApi.updateVehicle(this.addForm).then((res) => {
                  if (res.data.code == 200) {
                    this.$message({
                      type: "success",
                      message: "修改成功!",
                    });
                    this.getList();
                    this.visibleAddBox = false;
                  } else {
                    this.$message.error("修改失败!");
                  }
                });
              }
            }
          });
        } else {
          this.$message.error("信息填写不完整!");
        }
      });
    },
  },
  mounted() {
    this.getvehicleType();

    this.getList();
  },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
.control {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 29px;
  margin-bottom: 8px;

  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    > .title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    > .inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.main {
  width: 100%;
  height: calc(100vh - 211px);
  background-color: #fff;
  padding: 18px 30px 0 30px;

  .addBtn {
    text-align: right;
    margin-bottom: 16px;
  }

  .list {
    height: calc(100% - 96px);

    ::v-deep .el-table__body-wrapper {
      max-height: calc(100vh - 373px) !important;
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }

    .stateBtns {
      height: 30px;

      ::v-deep .el-button {
        font-size: 12px;
        border: none;
        // width: 76px;
        height: 30px;
        margin: 0 auto;
        box-sizing: border-box;
      }

      .icon-dian {
        font-size: 12px;
      }

      .Pass {
        background-color: #ecf5fe;
        color: #1890ff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 10px 9px;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 10px 9px;
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;

    .pagination {
      margin-left: auto;
    }
  }

  .formTitle {
    display: flex;
  }
}
</style>

<!-- 详情弹窗 -->
<style lang="scss">
.zdy_dialog {
  height: 100vh;
  margin: 0 !important;
  float: right;

  .dialog_header {
    display: flex;

    .icon-dairenzhengcheliang {
      font-size: 43px;
      color: #1890ff;
      margin-right: 12px;
    }

    .infoBox {
      > .info {
        display: flex;
        align-items: center;
        margin-bottom: 7px;

        > .carNumber {
          font-size: 18px;
          color: #262626;
          font-weight: bold;
          margin-right: 8px;
        }

        > .tag {
          width: 46px;
          height: 18px;
          background-color: #ecf5fe;
          font-size: 10px;
          color: #1890ff;
          text-align: center;
          line-height: 18px;
        }
      }

      > .text {
        color: #939393;
        font-size: 12px;
      }
    }
  }

  .dialog_body {
    > .title {
      height: 60px;
      display: flex;
      align-items: center;

      > .icon-xinxi {
        font-size: 16px;
        margin-right: 7px;
      }

      > h3 {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #262626;
      }

      .center_line {
        flex: 1;
        height: 1px;
        background-color: #f0f0f0;
        margin-left: 14px;
      }
    }

    .picBox {
      display: flex;

      .pic_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 32px;

        .pic {
          width: 109px;
          height: 71px;
        }

        > span {
          color: #666666;
          font-size: 12px;
        }
      }
    }
  }
}

.vehicleList {
  .el-form-item {
    .el-form-item__label {
      font-size: 12px;
    }
  }

  .special {
    .el-form-item {
      margin-bottom: 0;

      .el-form-item__label {
        line-height: 20px;
        padding-top: 10px;
      }

      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 60px;
        line-height: 60px;
        text-align: center;
      }

      .avatar {
        width: 80px;
        height: 60px;
        display: block;
      }
    }
  }

  .special2 {
    .el-form-item {
      margin-bottom: 0;

      .el-form-item__label {
        padding-top: 10px;
      }
    }

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }

    .avatar {
      width: 60px;
      height: 60px;
      display: block;
    }
  }
}

.flex-fpkp {
  display: flex;
  margin-bottom: 15px;
}

.cxbt {
  margin-left: 20px;
}
</style>